import {BuildOptions, ConfigEnv, CSSOptions, defineConfig, PluginOption} from 'vite';
import react from '@vitejs/plugin-react';
import Pages from 'vite-plugin-pages';
import Eslint from 'vite-plugin-eslint';
import path from 'path';
import Unocss from 'unocss/vite';
import Icons from 'unplugin-icons/vite';
import {FileSystemIconLoader} from 'unplugin-icons/loaders';
import VitePluginHtmlEnv from 'vite-plugin-html-env';
import Inspect from 'vite-plugin-inspect';
import AutoImport from 'unplugin-auto-import/vite';
// @ts-ignore
import {antdThemeVars} from './src/styles/antd-theme';
import viteCompression from 'vite-plugin-compression';
import Graphql from '@rollup/plugin-graphql';

const isEnvProduction = ({ mode }: ConfigEnv): boolean => {
    return mode === 'production';
};

const configPlugins = (configEnv: ConfigEnv): PluginOption[] => {
    const plugins = [
        VitePluginHtmlEnv(),
        react(),
        Pages({
            pagesDir: 'src/pages',
            importMode: 'async',
            routeBlockLang: 'json5',
            routeStyle: 'nuxt',
            resolver: 'react',
            moduleId: '~react-pages',
        }),
        Unocss({}),
        Icons({
            compiler: 'jsx',
            jsx: 'react',
            autoInstall: true,
            customCollections: {
                hd: FileSystemIconLoader(
                    'src/assets/icons',
                    svg => svg.replace(/^<svg /, '<svg fill="currentColor" '),
                ),
            },
        }),
        AutoImport({
            include: [
                /\.[tj]s?$/,
                /\.tsx$/,
                /\.md$/,
            ],
            imports: [
                'react',
            ],
            dirs: [
                'src/hooks',
                'src/modules',
            ],
            dts: 'src/types/auto-imports.d.ts',
            vueTemplate: false,
            eslintrc: {
                enabled: true,
                filepath: './.eslintrc-auto-import.json',
                globalsPropValue: true,
            },
        }),
        Eslint({ fix: true, cache: false }),
        Graphql(),
        viteCompression({
            threshold: 1024000,
        }),
    ];
    if (isEnvProduction(configEnv)) {
        plugins.push(Inspect());
    }
    return plugins;
};

const configBuildOptions = (configEnv: ConfigEnv): BuildOptions => {
    return {
        sourcemap: !isEnvProduction(configEnv),
        cssCodeSplit: true,
        minify: 'terser',
        terserOptions: {
            sourceMap: !isEnvProduction(configEnv),
            ie8: false,
            safari10: false,
            keep_classnames: !isEnvProduction(configEnv),
            keep_fnames: !isEnvProduction(configEnv),
            compress: {
                drop_console: isEnvProduction(configEnv),
                drop_debugger: isEnvProduction(configEnv),
            },
        },
    };
};

const configCss = (configEnv: ConfigEnv): CSSOptions => {
    return {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    ...antdThemeVars,
                },
                javascriptEnabled: true,
                
            },
        },
    };
};

export default defineConfig((configEnv) => {
    const build = configBuildOptions(configEnv);
    const plugins = configPlugins(configEnv);
    const css = configCss(configEnv);
    return {
        base: 'http://localhost:8096/',
        server: {
            host: '0.0.0.0',
            port: 8096,
            cors: true,
            origin: 'http://localhost:8096',
        },
        resolve: {
            alias: {
                '~': path.resolve(__dirname, 'src'),
            },
        },
        css,
        build,
        plugins,
        cacheDir: '.vite',
        optimizeDeps: {
            include: ['@apollo/client/core'],
            exclude: ['@apollo/client'],
        },
    };
});
